<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            
        }
        ul{
            padding-left: 20px;
            height: 0;
            overflow: hidden;
            transition: height .3s linear;
        }
        li{
            height: 35px;
            line-height: 35px;
            background-color: aqua;
            border-bottom: 1px solid rgb(2, 97, 97);
            box-sizing: border-box;
        }
        li:last-child{
            border:none
        }
        h4{
            border: 1px solid #000;
            line-height: 40px;
        }
    </style>
</head>
<body>
    <div class="box"></div>    
    <script>
        var data = [{
            title:"标题1",
            list:["列表内容1","列表内容2"]
        },{
            title:"标题2",
            list:["列表内容1","列表内容2","列表内容3"]
        },{
            title:"标题3",
            list:["列表内容1","列表内容2","列表内容3","列表内容4"]
        },{
            title:"标题4",
            list:["列表内容1","列表内容2"]
        },{
            title:"标题5",
            list:["列表内容1","列表内容2","列表内容3"]
        }];
        // 声明一个空字符串
        var str = "";
        data.forEach(function(item) {
            // item得到数组内的每个元素,连接字符串
            str += `<div class="list">
                       <h4>${item.title}</h4>
                    <ul>`;
                    var atr1 = "";
                    for (var i = 0; i <item.list.length; i++) {
                        // item.list[i];
                        str1 += `<li>${item.list}</li>`;                        
                    }
                    console.log(str1);
                    str += str1 + "</ul></div>"
        })
        // console.log(str);
        var box = document.querySelector(".box");
        box.innerHTML = str;

        var h4s = document.querySelectorAll('h4');
        var uls = document.querySelectorAll('ul');
        for (let k = 0; k < h4s.length; k++) {
            uls[k].onclick = function ( ) {
                for (var m = 0; m < uls.length; m++) {
                    const element = array[m];
                    uls[m].style.height = "0";
                }
                // 获取当前点击的h4相对应索引值的ul内的子标签li的个数
                // uls[k].children.length;
                // uls[k].children[0]  //获取到当前ul内的第一个li标签
                // uls[k].children[0].offsetHeight;  //获取第一个li标签的高度
                // li的个数 * 一个li的高度 == ul的高度
                // var num = uls[k].children.length * uls[k].children[0].offsetHeight;
                // console.log(data[k].list.length);

                var num = data[k].list.length * uls[k].children[0].offsetHeight;

                uls[k].style.height = num + "px";
            }
            
        }
    </script>
</body>
</html>